<template>
  <div class="help">
    <!-- 使用帮助 -->
    <div class="header">
      <van-nav-bar
        style="
          background-image: linear-gradient(-20deg,#ddd6f3 0%,#faaca8 100%,#faaca8 100%);"
        title="使用帮助"
        fixed
      />
    </div>
    <div style="height: 40px"></div>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> 

      <div class="two">
        <div class="title">
          <van-cell title="常见问题" icon="question" />
        </div>
        <van-cell-group>
          <van-cell title="1.优惠卷如何使用" @click="answer1=true"/>
          <van-cell title="2.取消订单后钱什么时候到账？" @click="answer2=true"/>
          <van-cell title="3.可以固定同一个阿姨服务吗？" @click="answer3=true"/>
          <van-cell title="4.如何选择上一次服务的阿姨？" @click="answer4=true"/>
          <van-cell title="5.预约成功后在哪查看？" @click="answer5=true"/>
        </van-cell-group>
      </div>

      <div class="fist">
        <div class="title">
          <van-cell title="咨讯信息" icon="question" />
        </div>

        <van-search
          v-model="value"
          show-action
          label="主题"
          placeholder="请输入咨讯标题"
          @search="onSearch"
        >
          <template #action>
            <van-button @click="onSearch" size='small' style="background-color:#F4B4B6;color:#fff;">搜索</van-button>
          </template>
        </van-search>

        <div class="news_list">
          <van-card
            v-for="article in articleData"
            :key="article.id"
            :thumb="article.cover"
            @click="toArticleDetail(article.id)"
          >
            <template #tags>
              <strong>{{ article.title }}</strong>
              <p>{{ article.category.name }}</p>
              <p>{{ article.publishTime | fmtDate }}</p>
            </template>
          </van-card>
        </div>
        
      </div>
      <!-- 占位 -->
      <div style="height: 50px"></div>

      <van-popup v-model="answer1" round  style="width:350px;height:160px">
        <div style="margin:20px;">
          <p>(1)确认订单时直接激活使用</p>
          <p>(2)进入购物车后点击“立即结算”</p>
          <p>(3)符合使用条件的优惠券会在订单确认页面显示出来</p>
        </div>
      </van-popup>
      <van-popup v-model="answer2" round  style="width:350px;height:240px">
        <div style="margin:20px;">
          <p>(1)商户发起退款操作后，资金会原路退回到支付时使用的账户</p>
          <p>(2)零钱支付实时到账，储蓄卡支付1-3个工作日到账，信用卡支付2-5个工作日到账</p>
          <p>(3)零钱是是否到账可以在下面的界面查询，银行卡是否到账可以去银行柜台,ATM机，网银等渠道查询</p>
        </div>
      </van-popup>
      <van-popup v-model="answer3" round  style="width:350px;height:120px">
        <div style="margin:20px;">
          <p>可以选择同一个阿姨服务，在下单时可预约阿姨</p>
        </div>
      </van-popup>
      <van-popup v-model="answer4" round  style="width:350px;height:120px">
        <div style="margin:20px;">
          <p>可以在已完成订单里选择再来一单，即可再选择相同的阿姨</p>
        </div>
      </van-popup>
      <van-popup v-model="answer5" round  style="width:350px;height:100px">
        <div style="margin:20px;">
          <p>预约成功的订单可以在待服务的订单里查看</p>
        </div>
      </van-popup>

    </van-pull-refresh>
  </div>
</template>

<script>
import { get } from "@/http/axios";
export default {
  data() {
    return {
      // 文章数组表格的数据源
      articleData: [],
      // 是否显示弹出框
      show: false,
      value:'',
      answer1:false,
      answer2:false,
      answer3:false,
      answer4:false,
      answer5:false,
      isLoading: false
    };
  },
  methods: {
    onRefresh() {
        setTimeout(() => {
            this.isLoading = false;
            this.active = 0
            this.articleData=[]
            this.getAllArticleData()
        }, 1000);
    },
    //分页多条件获取所有文章的数据
    async getAllArticleData() {
      // 获取参数
      let data = {
        page: 1,
        pageSize: 100,
        title:this.value
        // status:'审核通过',
      };
      // 通过对应的参数发送网络请求 获取产品数组数据
      let res = await get("/article/pageQuery", data);
      // console.log(res.data.data.list);
      // 当状态为审核通过或推荐时显示列表
      for (var i = 0; i < res.data.data.list.length; i++) {
        if (
          res.data.data.list[i].status == "审核通过" ||
          res.data.data.list[i].status == "推荐"
        ) {
          this.articleData.push(res.data.data.list[i]);
        }
      }
      if(this.articleData.length==0){
        this.$toast.fail('暂无相关数据');
      }
      // console.log("过滤后数组", this.articleData);
    },
    // 
    onSearch(){
      this.articleData=[]
      this.getAllArticleData()
    },
    // 点击图片，跳转到文章页面
    toArticleDetail(id) {
      this.$router.push({
        path: "news",
        query: {
          id: id,
        },
      });
    },
  },
  created() {
    this.getAllArticleData();
  },
};
</script>

<style scoped>
.title .van-icon {
  font-size: 22px;
  color: #f9db91;
}
.title .van-cell__title span {
  font-size: 20px;
}
/* /deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar__text {
  color: #fff;
} */
</style>